<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 1 1 1 = 111 */
      #d1 .c2 p {
        color: red;
      }

      /* 1 0 3 = 103 */
      div div div #p1 {
        color: blue;
      }

      /* 0 3  4 = 034 = 34*/
      div.c1 div.c2 div.c3 p {
        color: yellow;
      }

      /* .c1 .c2 .c3 p {
        color: pink;
      } */
    </style>
  </head>
  <body>
    <div id="d1" class="c1">
      <div id="d2" class="c2">
        <div id="d3" class="c3">
          <p id="p1">data</p>
        </div>
      </div>
    </div>
  </body>
</html>
